<template>
    <div style="overflow-y: scroll; overflow-x: hidden; height: 100vh">
        <div style="width: 96%; margin: 20px auto 0" ref="printContent">
            <div style="width: 100%; margin: 10px auto" id="print-content">
                <div style="text-align: center; width: 100%; font-weight: 700; margin-bottom: 10px; font-size: 18px">
                    单位产房屋情况调研表
                </div>
                <el-form ref="form" :model="form" :rules="rules">
                    <!-- 三行三列的表格 -->
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span
                                >基础信息 <span style="font-size: 12px">（<span style="color: red">*</span>为必填项）</span></span
                            >
                        </div>
                        <el-form-item prop="dwc" label="是否为单位产管理系统用户">
                            <el-radio-group v-model="form.dwc">
                                <el-radio label="是">是</el-radio>
                                <el-radio label="否">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item prop="dwczh" label="登录系统用户名" v-if="form.dwc == '是'">
                            <el-input v-model="form.dwczh" placeholder="请输入登录系统用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="dwmc" label="单位名称">
                            <el-input v-model="form.dwmc" placeholder="请输入单位名称"></el-input>
                        </el-form-item>
                        <el-form-item prop="dwxz" label="单位性质">
                            <el-input v-model="form.dwxz" placeholder="请输入单位性质"></el-input>
                        </el-form-item>
                        <el-form-item label="成立时间">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.clsj" style="width: 100%"></el-date-picker>
                        </el-form-item>
                        <el-form-item prop="bgdz" label="办公地址">
                            <el-input v-model="form.bgdz" placeholder="请输入办公地址"></el-input>
                        </el-form-item>
                        <el-form-item prop="glhs" label="管理户数">
                            <el-input
                                v-model="form.glhs"
                                placeholder="请输入管理户数"
                                @input="(v) => (form.glhs = v.replace(/[^\d]/g, ''))"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="cyry" label="从业人数">
                            <el-input
                                v-model="form.cyry"
                                placeholder="请输入从业人数"
                                @input="(v) => (form.cyry = v.replace(/[^\d]/g, ''))"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="上级单位">
                            <el-input v-model="form.sjdw" placeholder="请输入上级单位"></el-input>
                        </el-form-item>
                        <el-form-item prop="xtqk" label="管辖房屋录入单位自管产系统情况">
                            <el-radio-group v-model="form.xtqk" @change="getxtqk">
                                <el-radio label="全部录入">全部录入</el-radio>
                                <el-radio label="部分录入">部分录入</el-radio>
                                <el-radio label="全部未录入">全部未录入</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item prop="lrzmj" label="录入单位自管产系统中的总面积">
                            <el-input v-model="form.lrzmj" placeholder="请输入总面积"></el-input>
                        </el-form-item>
                        <el-form-item prop="wlryy" v-if="form.xtqk != '全部录入'" label="未录入单位自管产系统原因">
                            <el-radio-group v-model="form.wlryy">
                                <el-radio label="无产权证">无产权证</el-radio>
                                <el-radio label="有产权证未入网">有产权证未入网</el-radio>
                                <el-radio label="其他原因">其他原因</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item prop="wlrzmj" v-if="form.xtqk != '全部录入'" label="未录入单位自管产系统中的总面积">
                            <el-input v-model="form.wlrzmj" placeholder="请输入总面积"></el-input>
                        </el-form-item>
                    </el-card>
                    <el-card class="box-card" style="margin-top: 10px">
                        <div slot="header" class="clearfix">
                            <span
                                >经营信息 <span style="font-size: 12px">（<span style="color: red">*</span>为必填项）</span></span
                            >
                        </div>
                        <el-form-item label="房屋坐落区域">
                            <el-input v-model="form.fwzlqy" placeholder="请输入房屋坐落区域"></el-input>
                        </el-form-item>
                        <el-form-item label="修缮占租比">
                            <el-input v-model="form.xszszb" placeholder="请输入修缮占租比"></el-input>
                        </el-form-item>
                        <el-form-item label="房租收缴率">
                            <el-input v-model="form.fzsjl" placeholder="请输入房租收缴率"></el-input>
                        </el-form-item>
                        <el-form-item label="经营主业">
                            <el-input v-model="form.jyyz" placeholder="请输入经营主业"></el-input>
                        </el-form-item>
                        <el-form-item prop="sfwtzh" label="是否委托置换">
                            <el-radio-group v-model="form.sfwtzh">
                                <el-radio label="是">是</el-radio>
                                <el-radio label="否">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item prop="sfjyglzz" label="是否具有房屋经营管理资质">
                            <el-radio-group v-model="form.sfjyglzz">
                                <el-radio label="是">是</el-radio>
                                <el-radio label="否">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item prop="sfzhzz" label="是否具有房屋置换资质">
                            <el-radio-group v-model="form.sfzhzz">
                                <el-radio label="是">是</el-radio>
                                <el-radio label="否">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-card>
                    <el-card class="box-card" style="margin-top: 10px">
                        <div slot="header" class="clearfix">
                            <span>录入单位自管产系统中的房屋情况</span>
                        </div>
                        <el-form-item label="非成套住房户数">
                            <el-input
                                v-model="form.fctzfhs"
                                placeholder="请输入户数"
                                @input="(v) => (form.fctzfhs = v.replace(/[^\d]/g, ''))"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="非成套住房面积">
                            <el-input v-model="form.fctzfmj" placeholder="请输入面积"></el-input>
                        </el-form-item>
                        <el-form-item label="成套住房户数">
                            <el-input
                                v-model="form.cths"
                                placeholder="请输入户数"
                                @input="(v) => (form.cths = v.replace(/[^\d]/g, ''))"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="成套住房面积">
                            <el-input v-model="form.ctmj" placeholder="请输入面积"></el-input>
                        </el-form-item>
                        <el-form-item label="成套独用户数">
                            <el-input
                                v-model="form.ctdyhs"
                                placeholder="请输入户数"
                                @input="(v) => (form.ctdyhs = v.replace(/[^\d]/g, ''))"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="成套独用面积">
                            <el-input v-model="form.ctdymj" placeholder="请输入面积"></el-input>
                        </el-form-item>
                        <el-form-item label="解放前户数">
                            <el-input
                                v-model="form.jfqhs"
                                placeholder="请输入户数"
                                @input="(v) => (form.jfqhs = v.replace(/[^\d]/g, ''))"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="解放前面积">
                            <el-input v-model="form.jfqmj" placeholder="请输入面积"></el-input>
                        </el-form-item>
                        <el-form-item label="解放前-1976年户数">
                            <el-input
                                v-model="form.ajfqhs"
                                placeholder="请输入户数"
                                @input="(v) => (form.ajfqhs = v.replace(/[^\d]/g, ''))"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="解放前-1976年面积">
                            <el-input v-model="form.ajfqmj" placeholder="请输入面积"></el-input>
                        </el-form-item>
                        <el-form-item label="1976年-至今户数">
                            <el-input
                                v-model="form.ahs"
                                placeholder="请输入户数"
                                @input="(v) => (form.ahs = v.replace(/[^\d]/g, ''))"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="1976年-至今面积">
                            <el-input v-model="form.amj" placeholder="请输入面积"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="其他问题"
                            prop="qt"
                            :rules="form.wlryy == '其他原因' ? [{ required: true, message: '请输入其他原因', trigger: 'blur' }] : {}"
                        >
                            <el-input type="textarea" v-model="form.qt"></el-input>
                        </el-form-item>
                    </el-card>
                </el-form>
            </div>
            <div style="text-align: center">
                <el-button type="primary" size="small" style="margin: 0 auto 10px" @click="submitForm('form')">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { dwcadd } from '@/api/index';
export default {
    data: function () {
        return {
            form: {
                ahs: '', //1976户 ,
                ajfqhs: '', //解放前到1976户 ,
                ajfqmj: '', //解放前到1976面积 ,
                amj: '', //1976面积 ,
                bgdz: '', //地址 ,
                clsj: '', //成立时间 ,
                create_time: '', //创建时间 ,
                ctdyhs: '', //成套读用户 ,
                ctdymj: '', //成套独用面积 ,
                cths: '', //成套伙用户 ,
                ctmj: '', //成套伙用面积 ,
                cyry: '', //从业人员 ,
                dwczh: '', //单位产账号 ,
                dwmc: '', //单位名称 ,
                dwxz: '', //单位性质 ,
                fctzfhs: '', //非成套住房户 ,
                fctzfmj: '', //非成套住房面积 ,
                fwzlqy: '', //房屋坐落区域 ,
                fzsjl: '', //房租收缴率 ,
                glhs: '', //管理户数 ,
                id: '', //id ,
                jfqhs: '', //解放前户 ,
                jfqmj: '', //解放前面积 ,
                jyyz: '', //经营主业 ,
                lrzmj: '', //录入系统总面积 ,
                qt: '', //其他 ,
                sfjyglzz: '', //是否具有房屋经营管理资质 ,
                sfwtzh: '', //是否委托置换 ,
                sfzhzz: '', //是否置换资质 ,
                sjdw: '', //上级单位 ,
                wlryy: '', //未录入原因 ,
                wlrzmj: '', //未录入面积 ,
                xszszb: '', //修缮占收租比 ,
                xtqk: '全部录入' //管辖房屋录入系统情况
            },
            rules: {
                // ahs: [{ required: true, message: '请输入1976年-至今户数', trigger: 'blur' }],
                // ajfqhs: [{ required: true, message: '请输入解放前-1976年户数', trigger: 'blur' }],
                // ajfqmj: [{ required: true, message: '请输入解放前-1976年面积', trigger: 'blur' }],
                // amj: [{ required: true, message: '请输入1976年-至今面积', trigger: 'blur' }],
                bgdz: [{ required: true, message: '请输入办公地址', trigger: 'blur' }],
                // clsj: [{ required: true, message: '请选择成立时间', trigger: 'change' }],
                // ctdyhs: [{ required: true, message: '请输入成套独用户数', trigger: 'blur' }],
                // ctdymj: [{ required: true, message: '请输入成套独用面积', trigger: 'blur' }],
                // cths: [{ required: true, message: '请输入成套住房户数', trigger: 'blur' }],
                // ctmj: [{ required: true, message: '请输入成套住房面积', trigger: 'blur' }],
                cyry: [{ required: true, message: '请输入从业人员', trigger: 'blur' }],
                dwczh: [{ required: true, message: '请输入登录系统用户名', trigger: 'blur' }],
                dwc: [{ required: true, message: '请选择是否为单位产系统管理用户', trigger: 'change' }],
                dwmc: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
                dwxz: [{ required: true, message: '请输入单位性质', trigger: 'blur' }],
                // fctzfhs: [{ required: true, message: '请输入非成套住房户数', trigger: 'blur' }],
                // fctzfmj: [{ required: true, message: '请输入非成套住房面积', trigger: 'blur' }],
                // fwzlqy: [{ required: true, message: '请输入房屋坐落区域', trigger: 'blur' }],
                // fzsjl: [{ required: true, message: '请输入房租收缴率', trigger: 'blur' }],
                glhs: [{ required: true, message: '请输入管理户数', trigger: 'blur' }],
                // jfqhs: [{ required: true, message: '请输入解放前户数', trigger: 'blur' }],
                // jfqmj: [{ required: true, message: '请输入解放前面积', trigger: 'blur' }],
                // jyyz: [{ required: true, message: '请输入经营主业', trigger: 'blur' }],
                lrzmj: [{ required: true, message: '请输入录入单位自管产系统中的总面积', trigger: 'blur' }],
                sfjyglzz: [{ required: true, message: '请选择是否具有房屋经营管理资质', trigger: 'change' }],
                sfwtzh: [{ required: true, message: '请选择是否委托置换', trigger: 'change' }],
                sfzhzz: [{ required: true, message: '请选择是否具有房屋置换资质', trigger: 'change' }],
                // sjdw: [{ required: true, message: '请输入上级单位', trigger: 'blur' }],
                wlryy: [{ required: true, message: '请输入未录入单位自管产系统原因', trigger: 'change' }],
                wlrzmj: [{ required: true, message: '请输入未录入单位自管产系统中的总面积', trigger: 'blur' }],
                // xszszb: [{ required: true, message: '请输入修缮占租比', trigger: 'blur' }],
                xtqk: [{ required: true, message: '请输入管辖房屋录入单位自管产系统情况', trigger: 'change' }]
                // qt: [{ required: true, message: '请输入其他原因', trigger: 'blur' }],
            }
        };
    },
    directives: {
        print
    },
    methods: {
        // 点击全部录入
        getxtqk() {
            if (this.form.xtqk == '全部录入') {
                this.form.wlryy = '';
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // return
                    dwcadd(this.form).then((res) => {
                        if (res.code == 200) {
                            this.$message.success('保存成功！！！');
                        } else {
                            this.$message.error('保存失败！！！');
                        }
                    });
                } else {
                    // alert('error submit!!');
                    return false;
                }
            });
        },
    },
    mounted() {
    }
};
</script>

<style scoped>
@page {
    size: auto;
    margin: 0mm;
}
</style>
<style>
table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #abacae;
    border-collapse: collapse;
    table-layout: fixed;
    /*合并相邻表格的间距*/
}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    padding: 18px;
    box-sizing: border-box;
    color: #606266;
    word-wrap: break-word;
    word-break: break-all;
}
</style>